<template>
  <div class="order-look w-full h-full">
    <section class="address-search py-20 flex-space-between">
      <div @click="back"> < </div>
      <div>订单中心</div>
      <div></div>
    </section>

    <section>
      <van-tabs>
        <van-tab v-for="index in 8" :title="title[index]">
          <div class=" bg-fff h-full mt-20">
            <div>
              <div class="flex  p-10 items-center flex-space-between">
                <div>店铺名称</div>
                <div>{{title[index]}}</div>
              </div>

              <van-collapse v-model="activeNames">
                <van-collapse-item title="商品详情" name="1">
                  <div class="flex items-center flex-space-between mb-10" v-for="item in 5">
                    <div>牛肉</div>
                    <div>x1</div>
                    <div>￥12</div>
                  </div>
                </van-collapse-item>
              </van-collapse>


             <section class="mt-20">
               <div class="flex py-20 items-center flex-space-between " >
                 <div>小计</div>
                 <div>￥12</div>
               </div>
               <div class="flex py-20 mt-10 items-center flex-space-between " >
                 <div>配送</div>
                 <div>￥3</div>
               </div>
               <div class="flex py-20 mt-10 items-center flex-space-between " >
                 <div>应付总计：</div>
                 <div class="font-FF4444">￥15</div>
               </div>

               <div class="flex py-20 mt-10 items-center  " >
                 <div>订单备注：</div>
                 <div>不要辣</div>
               </div>
             </section>

              <section class="flex border-top flex-center flex-space-between w-full mt-20 pt-40 pb-40">
                <van-button type="default" class="w-35per border-radius"  @click="cacel">取消</van-button>
                <van-button type="info" class="w-35per ml-40 border-radius" @click="pay">付款</van-button>

              </section>


<!--
             <section class="overlay" v-if="show">
               <div>

               </div>
             </section>

-->


            </div>
          </div>
        </van-tab>
      </van-tabs>
    </section>




  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      title:['待付款','待配送','待收货','已完成','退款','撤销'],
      activeNames: ['1'],
      show: false
    }
  },
  methods: {
    cacel(){
      this.show = true
    },
    pay(){
      this.$router.push('/orderDetail')
    },
    back(){
      history.go(-1)
    }
  },


}
</script>

<style lang="less" scoped>
.order-look{
  background-color: #efefef;
  position: relative;
}
.address-search {
  background-color: #39a9ed;
  display: flex;
  align-items: center;
  height: 50px;
  color: #fff;
  justify-content: space-around;
}
.border-radius{
  border-radius: 5px;
}
.overlay{
  width: 80%;
  height: 200px;
  background-color: #efefefcc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;

}
</style>
